<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'basicdata.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item><a routerLink="/pages/sales-master/sales-payment">销售收款单</a></d-breadcrumb-item>
      <d-breadcrumb-item>销售收款单—制单</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
    <div class="da-form-container ">
      <div class="card">
        <form dForm ngForm [layout]="layoutDirection" [labelSize]="'sm'" [labelAlign]="'end'" (dSubmit)="submit($event)">
          <div class="form-header">
            <p class="form-title">销售收款单—制单</p>
            <div class="form-head-btnGroup">
              <d-button class="me-3" (btnClick)="selectOrder()">选源单</d-button>
              <d-button class="me-3" bsStyle="primary" dFormSubmit>确定</d-button>
              <!-- <d-button class="me-3" bsStyle="primary" dFormSubmit (btnClick)="isStartApprovalChange()">确定并发起审核</d-button> -->
              <d-button bsStyle="common" (btnClick)="cancel()">取消</d-button>
            </div>
          </div>
          <div class="form-body">
            <div>
              <h4>基本信息</h4>
            </div>
            <div class="grid mt-3">
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label"><span class="Required">*</span>收款单号</span>
                  </d-form-label>
                  <d-form-control>
                    <input dTextInput type="text" name="收款单号" [(ngModel)]="saleOrder.saleOrderNum" >
                  </d-form-control>
                </d-form-item>
              </div>
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label"><span class="Required">*</span>收款日期</span>
                  </d-form-label>
                  <d-form-control>
                    <d-datepicker-pro name="收款日期" [appendToBody]="false"
                      [(ngModel)]="saleOrder.orderDate" [dValidateRules]="saleOrderRules.orderDate"></d-datepicker-pro>
                  </d-form-control>
                </d-form-item>
              </div>
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label"><span class="Required">*</span>客户名称</span>
                  </d-form-label>
                  <d-form-control>
                    <input dTextInput class="form-input-box" name="客户名称" [(ngModel)]="saleOrder.customerName" readonly (click)="selectCustomerBefore('warning')" [dValidateRules]="saleOrderRules.customerName">
                  </d-form-control>
                </d-form-item>
              </div>
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">客户简称</span>
                  </d-form-label>
                  <d-form-control>
                    <input dTextInput class="form-input-box" name="客户简称" [(ngModel)]="saleOrder.customerShortName">
                  </d-form-control>
                </d-form-item>
              </div>
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">客户联系人</span>
                  </d-form-label>
                  <d-form-control>
                    <d-select name="客户联系人" [options]="customerLinkMan" [(ngModel)]="customerContact"
                    [valueKey]="'customerContactId'" [filterKey]="'customerContactName'"
                    (ngModelChange)="slectLinkMan($event)">
                  </d-select>
                  </d-form-control>
                </d-form-item>
              </div>
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">联系方式</span>
                  </d-form-label>
                  <d-form-control>
                    <input dTextInput class="form-input-box" name="联系方式" [(ngModel)]="saleOrder.contactInfo">
                  </d-form-control>
                </d-form-item>
              </div>
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">业务员</span>
                  </d-form-label>
                  <d-form-control>
                    <input type="text" dTextInput name="业务员" [(ngModel)]="saleOrder.salesman" readonly (click)="selectUser()" [dValidateRules]="saleOrderRules.salesman">
                  </d-form-control>
                </d-form-item>
              </div>
              <!-- <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">收款方式</span>
                  </d-form-label>
                  <d-form-control>
                    <d-select name="收款方式" [options]="settlementMethodOptions" [(ngModel)]="saleOrder.settlementMethod" [filterKey]="'settlementMethodName'" [valueKey]="'settlementMethodName'">
                    </d-select>
                  </d-form-control>
                </d-form-item>
              </div>
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">收款账户</span>
                  </d-form-label>
                  <d-form-control>
                    <input dTextInput class="form-input-box" name="收款账户" [(ngModel)]="saleOrder.deliveryAddress">
                  </d-form-control>
                </d-form-item>
              </div> -->
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">关联销售订单号</span>
                  </d-form-label>
                  <d-form-control>
                    <input dTextInput class="form-input-box" name="关联销售订单号" [(ngModel)]="saleOrder.customerOrderNum">
                  </d-form-control>
                </d-form-item>
              </div>
              <!-- <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">关联结算单号</span>
                  </d-form-label>
                  <d-form-control>
                    <input dTextInput class="form-input-box" name="关联结算单号" [(ngModel)]="saleOrder.paymentTerm">
                  </d-form-control>
                </d-form-item>
              </div> -->
              <div class="u-1">
                <d-form-item>
                  <d-form-label>
                    <span class="label">备注</span>
                  </d-form-label>
                  <d-form-control class="textarea">
                    <textarea dTextarea name="备注" [(ngModel)]="saleOrder.remark"></textarea>
                  </d-form-control>
                </d-form-item>
              </div>
            </div>
            <div>
              <h4>收款信息</h4>
            </div>
            <div class="grid mt-3">
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label"><span class="Required">*</span>应收金额</span>
                  </d-form-label>
                  <d-form-control>
                    <d-input-number name="应收金额" [(ngModel)]="saleOrder.totalAmountWithTax" [min]="0" class="input-number"></d-input-number>
                  </d-form-control>
                </d-form-item>
              </div>
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label"><span class="Required">*</span>实收金额</span>
                  </d-form-label>
                  <d-form-control>
                    <d-input-number name="实收金额" [(ngModel)]="saleOrder.totalDiscountAmountWithTax" [min]="0" class="input-number"></d-input-number>
                  </d-form-control>
                </d-form-item>
              </div>
              <!-- <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">优惠金额</span>
                  </d-form-label>
                  <d-form-control>
                    <d-input-number name="优惠金额" [(ngModel)]="saleOrder.totalTaxAmount" [min]="0" class="input-number"></d-input-number>
                  </d-form-control>
                </d-form-item>
              </div> -->
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">剩余金额</span>
                  </d-form-label>
                  <d-form-control>
                    <input dTextInput class="form-input-box" name="剩余金额" [(ngModel)]="saleOrder.totalDiscountTaxAmount" disabled>
                  </d-form-control>
                </d-form-item>
              </div>
            </div>
            <div>
              <h4>销售产品信息</h4>
            </div>
            <div class="table">
              <d-data-table [lazy]="true" [scrollable]="true" [fixHeader]="true" [resizeable]="true"
                [tableWidthConfig]="tableWidthConfig" [dataSource]="this.saleOrder.saleOrderParts">
                <thead dTableHead>
                  <tr dTableRow>
                    <th dHeadCell>产品编码</th>
                    <th dHeadCell>产品图片</th>
                    <th dHeadCell>产品名称</th>
                    <th dHeadCell>规格型号</th>
                    <th dHeadCell>产品描述</th>
                    <th dHeadCell>数量</th>
                    <th dHeadCell>单位</th>
                    <th dHeadCell>单价(含税)</th>
                    <th dHeadCell>单价(不含税)</th>
                    <th dHeadCell>税率(%)</th>
                    <th dHeadCell>折扣(%)</th>
                    <th dHeadCell>含税金额</th>
                    <th dHeadCell>不含税金额</th>
                    <th dHeadCell>税额</th>
                    <th dHeadCell>折扣后含税金额</th>
                    <th dHeadCell>备注</th>
                  </tr>
                </thead>
                <tbody dTableBody>
                  <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                    <tr dTableRow>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.partNum">{{rowItem.partNum}}</span>
                      </td>
                      <td dTableCell>
                        <span>
                          <div dImagePreview>
                            <d-badge *ngIf="rowItem.image" [count]="getImagesArray(rowItem.image).length" status="success">
                              <ng-container *ngFor="let imageUrl of getImagesArray(rowItem.image); let i = index">
                                <img *ngIf="getImagesArray(rowItem.image).length > 0" [src]="imageUrl" alt="图片" width="30px" height="30px" [ngStyle]="{'display': i === 0 ? 'block' : 'none'}" />
                              </ng-container>
                            </d-badge>
                          </div>
                        </span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.partName">{{rowItem.partName}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.partType">{{rowItem.partType}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.description">{{rowItem.description}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.quantity">{{rowItem.quantity}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.partUOM">{{rowItem.partUOM}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.priceWithTax">{{rowItem.priceWithTax}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.priceWithoutTax">{{rowItem.priceWithoutTax}}</span>
                      </td>
                      <td dTableCell>
                        <span>{{Math.floor(rowItem.taxRate * 100)}}</span>
                      </td>
                      <td dTableCell>
                        <span>{{Math.floor(rowItem.discount * 100)}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.amountWithTax">{{rowItem.amountWithTax}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.amountWithoutTax">{{rowItem.amountWithoutTax}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.taxAmount">{{rowItem.taxAmount}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.discountAmountWithTax">{{rowItem.discountAmountWithTax}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="rowItem.partRemark">{{rowItem.partRemark}}</span>
                      </td>
                    </tr>
                  </ng-template>
                </tbody>
              </d-data-table>
            </div>
            <!-- <div class="mt-3">
              <h4>金额汇总</h4>
            </div>
            <div class="grid mt-3">
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">数量合计</span>
                  </d-form-label>
                  <d-form-control>
                    <input dTextInput class="form-input-box" name="数量合计" [(ngModel)]="saleOrder.totalQuantity" disabled>
                  </d-form-control>
                </d-form-item>
              </div>
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">金额合计(含税)</span>
                  </d-form-label>
                  <d-form-control>
                    <input dTextInput class="form-input-box" name="金额合计（含税）" [(ngModel)]="saleOrder.totalAmountWithTax" disabled>
                  </d-form-control>
                </d-form-item>
              </div>
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">税额合计</span>
                  </d-form-label>
                  <d-form-control>
                    <input dTextInput class="form-input-box" name="税额合计" [(ngModel)]="saleOrder.totalTaxAmount" disabled>
                  </d-form-control>
                </d-form-item>
              </div>
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">折扣后金额合计</span>
                  </d-form-label>
                  <d-form-control>
                    <input dTextInput class="form-input-box" name="折扣后金额合计" [(ngModel)]="saleOrder.totalDiscountAmountWithTax" disabled>
                  </d-form-control>
                </d-form-item>
              </div>
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">折扣后税额合计</span>
                  </d-form-label>
                  <d-form-control>
                    <input dTextInput class="form-input-box" name="折扣后税额合计" [(ngModel)]="saleOrder.totalDiscountTaxAmount" disabled>
                  </d-form-control>
                </d-form-item>
              </div>
            </div> -->
            <div class="mt-3">
              <h4>其他</h4>
            </div>
            <div class="grid mt-3">
              <div class="u-1-3">
                <d-form-item>
                  <d-form-label>
                    <span class="label">附件上传</span>
                  </d-form-label>
                  <d-form-control>
                    <d-badge [count]="saleOrder.files.length" >
                      <d-button bsStyle="common" (btnClick)="fujian()"><i class="icon icon-upload me-2"></i><span>附件</span></d-button>
                    </d-badge>
                  </d-form-control>
                </d-form-item>
              </div>
            </div>
          </div>
          <d-form-operation class="form-footer">
            制单人：{{saleOrder.creator}}
          </d-form-operation>
        </form>
      </div>
    </div>
  </div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
